<template>
  <div class="content">
    <div class="title">
      <div class="text">
        <div class="font">安全帽实时佩戴监控</div>
      </div>
      <div class="text" style="text-align: right;">
        <div class="font" style="color: #D29A00;">更多</div>
      </div>
    </div>
    <div class="title">
      <div class="text">
        <div class="font" style="color:rgba(255,255,255,0.65);">今日未佩戴安全帽数量</div>
        <div class="font">{{ countData.todayCount }}人</div>
      </div>
      <div class="text">
        <div class="font" style="color:rgba(255,255,255,0.65);">昨日未佩戴人数</div>
        <div class="font">{{ countData.yesterdayCount }}人</div>
      </div>
      <div class="text">
        <div class="font" style="color:rgba(255,255,255,0.65);">当周累计未佩戴人数</div>
        <div class="font">{{ countData.thisWeek }}人</div>
      </div>
      <div class="text">
        <div class="font" style="color:rgba(255,255,255,0.65);">当月累计未佩戴人数</div>
        <div class="font">{{ countData.thisMonth }}人</div>
      </div>
    </div>
    <div class="echart">
      <div id="supervisory" style="width:100%;height:300px;" />
    </div>
    <!-- <div class="title">
      <div class="text">
        <div class="font">本月收入(元)&nbsp;&nbsp;&nbsp;<span class="number">¥ 12,423</span></div>
      </div>
    </div> -->
  </div>
</template>

<script>
import { countData, latestTenData } from '@/api/autonym'

export default {
  name: 'Supervisory',
  data() {
    return {
      countData: {
        todayCount: 0,
        yesterdayCount: 0,
        thisWeek: 0,
        thisMonth: 0
      },
      latestTenData: []
    }
  },
  mounted() {
    this.getDetail()
    this.getList()
  },
  methods: {
    // 获取数据
    async getDetail() {
      const res = await countData()
      if (res.code === 200) {
        if (res.data) {
          this.countData = res.data
        }
      }
    },
    async getList() {
      const res = await latestTenData()
      if (res.code === 200) {
        if (res.data) {
          this.latestTenData = res.data
        }
        this.$nextTick(function() {
          this.drawPie()
        })
      }
    },
    drawPie() {
      const myChart = this.$echarts.init(document.getElementById('supervisory'))
      var data = [
        this.latestTenData
        // [
        //   ['201203-01', 77, 233],
        //   ['2012-03-02', 77.4, 332],
        //   ['2012-03-03', 68, 443]
        // ]
      ]
      const option = {
        grid: {
          left: '5%',
          right: '4%',
          bottom: '10%'
        },
        xAxis: {
          type: 'category',
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: 'rgba(250,250,250,1)',
              fontSize: 12
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          }
        },
        yAxis: {
          axisLabel: { //  改变x轴字体颜色和大小
            textStyle: {
              color: 'rgba(250,250,250,1)',
              fontSize: 12
            }
          },
          splitLine: {
            show: false,
            lineStyle: {
              type: 'dashed'
            }
          },
          scale: true
        },
        series: [
          {
            name: '安全帽实时佩戴监控',
            data: data[0],
            type: 'scatter',
            symbolSize: function(data) {
              // return 12
              // return Math.sqrt(data[2]) / 5e2
              return data[2] / 1.2
            },
            label: {
              emphasis: {
                show: true,
                formatter: function(param) {
                  // console.log(param.value)
                  return param.data[2]
                },
                position: 'top'
              }
            },
            itemStyle: {
              normal: {
                shadowBlur: 6,
                // shadowColor: 'rgba(210,154,0,0.6)',
                // backgroundColor: 'rgba(210,154,0,0.3)',
                shadowOffsetY: 5,
                color: 'rgba(210,154,0,0.5)'
              }
            }
          }]
      }
      myChart.setOption(option, window.onresize = myChart.resize)
    }
  }
}
</script>

<style lang="scss" scoped>
.content{
  // color: #ffffff;
  // border: 1px solid rgba(221,221,221,0.2);
  padding: 10px;
  .title{
    display: flex;
    .text{
      flex: 1;
      text-align: left;
      .font{
        color:#ffffff;
        cursor: pointer;
        font-size: 12px;
        font-weight: 400;
        padding: 5px 0;
        .number{
          font-size:14px;
          font-weight:500;
          color:rgba(255,255,255,0.85);
        }
      }
      .money{
         font-size: 12px;
        font-weight: 400;
        color: #ffffff;
      }
    }
  }
  .echart{
    // height: 70px;
    margin: -30px 0 32px 0;
  }
}
</style>
